<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>日期和时间组件文档 - layui.laydate</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">

	<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
		<input type="text" class="layui-input" id="test1">
	</div>
	<div class="layui-inline">
		<input type="text" class="layui-input" id="test2">
	</div>
	<div class="layui-inline">
		<input type="text" class="layui-input" id="test3">
	</div>
	<div class="layui-inline">
		<input type="text" class="layui-input" id="test4">
	</div>
	<div class="layui-inline">
		<input type="text" class="layui-input" id="test5">
	</div>
	<div class="layui-inline">
		<input type="text" class="layui-input" id="test6">
	</div>
	<div class="layui-inline">
		<input type="text" class="layui-input" id="test7">
	</div>


	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">日期范围</label>
			<div class="layui-inline" id="test-range">
				<div class="layui-input-inline">
					<input type="text" id="startDate" class="layui-input" placeholder="开始日期">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline">
					<input type="text" id="endDate" class="layui-input" placeholder="结束日期">
				</div>
			</div>
		</div>
	</div>

	<script>
		layui.use('laydate', function () {
			var laydate = layui.laydate;

			//执行一个laydate实例
			//年选择器
			laydate.render({
				elem: '#test1'
				, type: 'year'
			});

			//年月选择器
			laydate.render({
				elem: '#test2'
				, type: 'month'
			});

			//日期选择器
			var ins1 = laydate.render({
				elem: '#test3'
				//,type: 'date' //默认，可不填
				, format: 'yyyy年MM月dd日' //可任意组合
				//,value: '2018年08月18日' //必须遵循format参数设定的格式
				, value: new Date()
				, mark: {
					'0-09-24': '生日'
					, '0-12-31': '跨年' //每年12月31日
					, '0-0-10': '工资' //每个月10号
					, '2024-8-01': '' //具体日期
					, '2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
					, '2017-8-21': '发布'
				}

				//控件初始打开的回调
				, ready: function (date) {
					console.log("ready:", date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				}
				//日期时间被切换后的回调
				, change: function (value, date, endDate) {
					console.log(value); //得到日期生成的值，如：2017-08-18
					console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
					console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
				}

				//控件选择完毕后的回调
				, done: function (value, date) {
					console.log(date.year, date.month, date.date);
				}
			});

			//时间选择器
			laydate.render({
				elem: '#test4'
				, type: 'time'
			});

			//日期时间选择器
			laydate.render({
				elem: '#test5'
				, type: 'datetime'
			});

			//日期范围选择
			laydate.render({
				elem: '#test6'
				, range: '~' //或 range: '~' 来自定义分割字符
			});

			//日期时间范围选择
			laydate.render({
				elem: '#test7'
				, type: 'datetime'
				, range: true

			});

			laydate.render({
				elem: '#test-range' //开始时间和结束时间所在 input 框的父选择器
				//设置开始日期、日期日期的 input 选择器
				, range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
			});
		});
	</script>


</body>

</html>